<template>
  <div
    class='pr'
    style="width:100%;height:100%;"
  >
    <div
      id='echart7'
      style="width:26vw;height:35vh;"
    ></div>
    
  </div>
</template>

<script> 

import { init, graphic } from "echarts";
export default {
  name: "box7",
  props:{
    chooseBatch:String,
    moneyFormat:Function,
  },
  components: {
  },
  data: function () {
    return {
      flag: 2,
      kvs: [
        {
          flag: 0,
          text: "当日量",
        },
        {
          flag: 1,
          text: "7日量",
        },
        {
          flag: 2,
          text: "30日量",
        },
      ],
      dialog_visible: false,
      sub_title: null,
      filters: [],
      list:[
        {Name:'病理科',Amount:99942315129.59},
        {Name:'呼吸与危重症医学科',Amount:99812200023.59},
        {Name:'疼痛科',Amount:89352316425.87},
        {Name:'体检科',Amount:89363267425.87},
        {Name:'微创介入科',Amount:82456334752.83},
        {Name:'胃肠外科',Amount:81903232199.44},
        {Name:'胃肠外科1',Amount:81903468799.44},
        {Name:'胃肠外科2',Amount:81903232499.44},
        {Name:'胃肠外科3',Amount:81912870399.44},
        {Name:'胃肠外科4',Amount:81233190399.44},
      ]
    };
  },
  watch: {
    flag: {
      handler: "initCharts",
      immediate: true,
    },
    chooseBatch(){
      this.getData()
    }
  },
  myChart: null,
  mounted() {
    // this.getData()
    this.initCharts()
  },
  methods: {
    initCharts() {
      // const data = await this.$http.get(
      //   `/api/RepairReport/RepairLargeScreenModelCList?flag=${this.flag}`
      // );

      if (!this.myChart) {
        this.myChart = init(document.getElementById("echart7"));
        // this.myChart.on("click", (ev) => {
        //   this.filters = [
        //     {
        //       Name: "EvaluationerTime",
        //       compare: ">=",
        //       value: ev.data.Ds,
        //     },
        //     {
        //       Name: "EvaluationerTime",
        //       compare: "<",
        //       value: ev.data.De,
        //     },
        //     {
        //       Name: "EvaluationVal",
        //       compare: "in",
        //       value: ev.data.ChildValue.join(','),
        //     },
        //   ];
        //   this.sub_title = `日期起:${ev.data.Ds.substring(
        //     0,
        //     10
        //   )} 日期止:${ev.data.De.substring(0, 10)} 满意度:${ev.data.EvalText}`;
        //   this.dialog_visible = true;
        // });
      }
      const option = {
        grid: {
          top: 63,
          let: 0,
          right: '26%',
          bottom: 36,
        },
        title:[
          {
            text:'科室设备金额排行',
            top:16,
            left:24,
            textStyle:{
              color:'#d6e2ff',
              fontSize:18,
              fontWeight:400,
              fontFamily:'Microsoft YaHei',
            },
          },
          {
            text:'(单位:元)',
            top:20,
            left:174,
            textStyle:{
              color:'#d6e2ff',
              fontSize:14,
              fontWeight:400,
              fontFamily:'Microsoft YaHei',
            },
          },
        ],
        xAxis: {
          type: "value",
          axisTick: {show: false},
          axisLabel: {show: false},
          axisLine: {show: false},
          splitLine: {show: false},
        },
        yAxis: [
          {
            type: "category",
            splitLine:{show: false},
            axisLine: {show: false,},
            axisLabel:{
              show:true,
              inside:true,
              padding:[0,0,10,0],
              color: "#d6e2ff",
              margin:0,
              align: 'left',
              verticalAlign:'bottom',
              fontSize:14,
            },
            axisTick:{show:false},
            inverse:true,
            data: this.list.map((v) => v.Name),
          },
          // {
          //   type:'category',
          //   inverse:true,
          //   axisTick:'none',
          //   axisLine:'none',
          //   axisLabel:{
          //     color:'#b4d6ff',
          //     fontSize:14,
          //     offset:[0,-12],
          //     formatter:e=>this.moneyFormat(e||0),//e=>this.moneyFormat(e.data||0),
          //   },
          //   data: this.list.map(i=>i.Amount.toFixed(0)||0)
          // }
        ],
        dataZoom: [
          {
            type: 'slider',
            realtime: true,
            width:8,
            top:63,
            height: "65%", //组件高度
            right: '1%', //右边的距离
            bottom: 1498, //下边的距离
            show: this.list.length>6,  // 是否展示
            borderCap:'round',
            orient:'vertical',
            fillerColor: "#3fb6ff", // 滚动条颜色
            borderColor: "none",
            handleSize: 8,      //两边手柄尺寸
            handleIcon: "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z",
            handleStyle:{
              color:'#3fb6ff',
              borderWidth:0
            },
            showDetail: false, //拖拽时是否展示滚动条两侧的文字
            zoomLock: true,         //是否只平移不缩放
            moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
            zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
            showDataShadow:false,
            brushSelect:false,
            startValue:0,
            endValue:5,
            minValueSpan:5,
            maxValueSpan:5,
          },
          {
            type: "inside",  // 支持内部鼠标滚动平移
            orient:'vertical',
            zoomOnMouseWheel: false,  // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
          }
        ],
        series: [
          {
            type:'bar',
            name:'排行榜',
            barWidth:8,
            barGap:20,
            itemStyle:{
              normal:{
                color:new graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#0596ff",
                    },
                    {
                      offset: 1,
                      color: "#38dbff",
                    },
                  ],
                  false
                ),
                opacity: 1,
              }
            },
            label:{
              show:true,
              position:'right',
              offset:[4,0],
              fontSize:14,
              distance:2,
              textStyle:{
                color:'#b4d6ff',
                fontSize:14
              },
              formatter:e=>this.moneyFormat(e.data||0)
            },
            data:this.list.map(i=>i.Amount.toFixed(0)||0)
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    getData(){
      this.$http.get(`/api/StocktakingAccountReport/StocktakingReportC/${this.chooseBatch||''}`)
        .then(res=>{
          this.list=res
          this.initCharts()
        })
    },
    resize(){
      this.myChart.resize()
    }
  }, 
};
</script>

<style>
</style>